<div class="container challenge-solved-toast mat-elevation-z4">
  <mat-card class="accent-notification" *ngFor="let notification of notifications; index as index">
    <div> {{notification.message}}<span (click)="closeNotification(index, $event.shiftKey)" style="float:right;cursor:pointer">X</span></div>
    <br>
    <div [hidden]="!showCtfFlagsInNotifications">
      <div *ngIf="showCtfCountryDetailsInNotifications !== 'none'">
        <span
        class="flag-icon flag-icon-{{notification.country.code | lowercase}}"
        *ngIf="showCtfCountryDetailsInNotifications === 'flag' || showCtfCountryDetailsInNotifications === 'both'">
        </span>
        <i class="fa fa-globe" *ngIf="showCtfCountryDetailsInNotifications === 'name'"></i>
        <span *ngIf="showCtfCountryDetailsInNotifications === 'name' || showCtfCountryDetailsInNotifications === 'both'">
            {{notification.country.name}}
        </span>
        <br>
      </div>
      <i class="fas fa-flag-checkered"></i> {{notification.flag}}
      <button ngxClipboard mat-raised-button [cbContent]="notification.flag" (cbOnSuccess)="notification.copied = true" [disabled]="notification.copied">
        <i class="fas fa-clipboard" aria-hidden="true"></i>
        <span [hidden]="!notification.copied">{{"COPY_SUCCESS" | translate}}</span>
        <span [hidden]="notification.copied">{{"COPY_TO_CLIPBOARD" | translate}}</span>
      </button>
    </div>
  </mat-card>
</div>
